#app.dark-mode {
    @apply bg-gray-800;

    header {
        @apply bg-purple-700;

        #search {
            @apply bg-purple-800;

            i.fa-search {
                @apply text-purple-900;
            }

            a {
                @apply text-purple-900;

                &:hover {
                    @apply text-white;
                }
            }
        }
    }

    #content {
        @apply text-white;
    }

    #file-list a:hover {
        @apply bg-purple-700;

        button:hover {
            @apply bg-purple-900;
        }
    }

    footer {
        @apply text-white;
        @apply border-white;

        a:hover {
            @apply text-purple-600;
        }
    }

    #scroll-to-top {
        @apply bg-purple-700;
    }

    #file-info-modal {
        background-color: hsla(218, 23%, 33%, 0.5) !important;

        #file-info-dialogue {
            @apply bg-gray-800;
            @apply text-white;

            header {
                @apply bg-purple-700;

                button {
                    @apply text-purple-900;

                    &:hover {
                        @apply text-white;
                    }
                }
            }
        }
    }

    #readme {
        article {
            @apply bg-gray-900;
            @apply border-0;
        }
    }

    .markdown {
        a {
            @apply text-purple-600;

            &:hover {
                @apply text-purple-800;
            }
        }

        h1,
        h2 {
            @apply border-gray-800;
        }

        h6 {
            @apply text-base;
            @apply text-gray-600;
        }

        code {
            @apply bg-gray-800;
        }

        hr {
            @apply border-gray-800;
        }

        .hljs,
        .hljs-keyword {
            @apply text-white;
        }
    }
}
